<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Edge Styles | Colors</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }

      p {
        max-width: 800px;
      }
    </style>
  </head>
  <body>
    <p>
      There are a lot of options with colors. You can manually define a color or
      inherit the color from the nodes. You can set the opacity to override any
      opacity given by a color.
      <b
        >IN ORDER TO USE THE OPACITY, BOTH THE NODES AND THE EDGES NEED COLORS
        IN HEX OR RGB</b
      >!
    </p>

    <div id="mynetwork"></div>

    <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "node\none", shape: "box", color: "#97C2FC" },
        { id: 2, label: "node\ntwo", shape: "circle", color: "#FFFF00" },
        { id: 3, label: "node\nthree", shape: "diamond", color: "#FB7E81" },
        {
          id: 4,
          label: "node\nfour",
          shape: "dot",
          size: 10,
          color: "#7BE141",
        },
        { id: 5, label: "node\nfive", shape: "ellipse", color: "#6E6EFD" },
        { id: 6, label: "node\nsix", shape: "star", color: "#C2FABC" },
        { id: 7, label: "node\nseven", shape: "triangle", color: "#FFA807" },
        {
          id: 8,
          label: "node\neight",
          shape: "triangleDown",
          color: "#6E6EFD",
        },
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 8, color: { color: "red" } },
        { from: 1, to: 3, color: "rgb(20,24,200)" },
        {
          from: 1,
          to: 2,
          color: { color: "rgba(30,30,30,0.2)", highlight: "blue" },
        },
        { from: 2, to: 4, color: { inherit: "to" } },
        { from: 2, to: 5, color: { inherit: "from" } },
        { from: 5, to: 6, color: { inherit: "both" } },
        { from: 6, to: 7, color: { color: "#ff0000", opacity: 0.3 } },
        { from: 6, to: 8, color: { opacity: 0.3 } },
      ]);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {
        nodes: {
          shape: "circle",
        },
      };
      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>
